<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>
  
  <script>
// const elementResizeDetectorMaker = require("element-resize-detector");
export default {
  mounted() {},
  computed: {
    // ...mapGetters(["echartsColor"]),
  },
  watch: {
    barWidth: "drawLine", // 数值变化是更新图表
    // gridBottom: "drawLine", // 数值变化是更新图表
    fontSize: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
    unit: "drawLine", // 数值变化是更新图表
    valueStyle: "drawLine", // 数值变化是更新图表
    symbolSize: "drawLine", // 数值变化是更新图表
    gridRight: "drawLine", // 数值变化是更新图表
  },
  props: {
    gridLeft: {
      type: Number | String,
      default: '0%'
    },
    gridRight: {
      type: Number | String,
      default: '8%'
    },
    barWidth: {
      type: [Number, String],
      default: 5,
    },
    unit: {
      type: String,
      default: "",
    },
    valueStyle: {
      type: [String, Number],
      default: -30,
    },
    symbolSize: {
      type: [String, Number],
      default: () => 18,
    },
    length: {
      type: [String, Number],
      default: () => 5,
    },
    fontSize: {
      type: [Number, String],
      default: 11,
    },
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [
          {
            value: 520,
            name: "温度",
          },
          {
            value: 345,
            name: "湿度",
          },
          {
            value: 234,
            name: "UPS",
          },
          {
            value: 123,
            name: "门禁",
          },
          {
            value: 100,
            name: "消防",
          },
        ];
      },
    },
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        var cw = document.body.clientWidth;
        this.$nextTick(() => {
          let myChart = this.$echarts.init(this.$refs.echarts_box);
          const img =
            "image://";
          let myData = this.data;
          if (myData.length > this.length) {
            myData = myData.slice(0, this.length);
          }
          const myColor = [
            "#51FC4E",
            "#4C5FF5",
            "#FFE660",
            "#79F1FF",
          ].reverse();
          let xData = [];
          let yData = [];
          for (let item of myData) {
            xData.push(item.name);
            yData.push(item.value);
          }
          // const xData = this.data.map((item) => item.name);
          // const yData = this.data.map((item) => item.value);
          const max = Math.ceil(Math.max(...yData) * 1.2);
          const maxData = [];
          for (let item of yData) {
            maxData.push(max);
          }
          // console.log(maxData)
          // console.log(xData)
          console.log(yData)
          let option = {
            // backgroundColor: "#313131",
            tooltip: {
              show: true,
              // confine: true,
              backgroundColor: "rgba(0,74,174,0.9)", //设置背景颜色
              textStyle: {
                fontSize: 14,
                color: "rgba(255,255,255,1)", //设置文字颜色
                fontFamily: "PingFang SC",
              },
              trigger: "item",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            grid: {
              left: this.gridLeft,
              right: this.gridRight,
              bottom: "0%",
              top: "10%",
              containLabel: false,
            },
            
            xAxis: [
              {
                show: false,
              },
              {
                show: false,
              },
            ],
            yAxis: [
              {
                show: false,
                inverse: true,
                data: xData,
              },
              {
                show: true,
                inverse: true,
                data: xData,
                // offset: this.valueStyle,
                position: "right",
                axisLabel: {
                  lineHeight: 0,
                  verticalAlign: "bottom",
                  fontSize: this.fontSize,
                  fontFamily: "Furore",
                  color: "#07C8FF",
                  formatter: (value,index) => {
                    console.log(value, index)
                    return yData[index] + this.unit
                  },
                  shadowBlur: 200,
                  shadowColor: "red",
                  textBorderWidth: 1,
                  textShadowBlur: "red",
                },
              },
            ],
            series: [
              {
                show: true,
                inverse: true,
                type: "bar",
                barGap: "-100%",
                xAxisIndex: 1,
                barWidth: this.barWidth,
                itemStyle: {
                  borderRadius: 5,
                  color: (params) => {
                    var num = myColor.length;
                    return {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "rgba(9,55,98,0.5)",
                        },
                        {
                          offset: 1,
                          color: "rgba(29,154,210,0.90)",
                        },
                      ],
                    };
                  },
                },
                // max: 0,
                labelLine: {
                  show: false,
                },
                z: 2,
                data: yData,
              },
              {
                name: "外圆",
                type: "scatter",
                symbol: img,
                emphasis: {
                  scale: false,
                },
                xAxisIndex: 1,
                symbolSize: this.symbolSize,
                itemStyle: {
                  // color: (params) => {
                  //   var num = myColor.length;
                  //   return "rgba(29,154,210,0.90)";
                  // },
                  shadowColor: "rgba(255, 255, 255, 0.5)",

                  shadowBlur: 5,
                  borderWidth: 1,
                  opacity:1,
                },
                z: 2,
                data: yData,
              },
              {
                z: 1,
                show: true,
                type: "bar",
                inverse: true,
                xAxisIndex: 1,
                barGap: "-100%",
                barWidth: this.barWidth,
                itemStyle: {
                  borderRadius: 5,
                  color: "rgba(0,114,255,0.12)",
                },
                label: {
                  show: true,
                  position: [0, -16],
                  fontFamily: "PingFang SC",
                  // position: "left",
                  // rich: {
                  //   //富文本
                  //   white: {
                  //     //自定义颜色
                  //     color: "#fff",
                  //   },
                  // },
                  fontSize: 12,
                  color: "#CFEEFC",
                  formatter: function (data) {
                    return xData[data.dataIndex];
                  },
                },
                data: maxData,
              },
            ],
          };
          myChart.setOption(option);
          /* 大小自适应 */
          window.addEventListener("resize", () => {
            // h = this.$refs.echarts_box.offsetHeight;
            // console.log(h);
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>
  